<template>
  <view
    class="detail_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 轮播图 -->
    <carousel :height="700" :list-image="[data?.goodsCover]" :mode="'image'" />

    <!-- 标题 -->
    <view class="title">
      {{ data?.goodsTitle }}
    </view>

    <!-- 价格 -->
    <price :data="format.priceHandler(data?.goodsDiscount ?? data?.goodsPrice)" />

    <!-- 图文简介 -->
    <!-- 图片 -->
    <image
      v-if="data?.goodsTeletext"
      class="synopsis"
      :src="data?.goodsTeletext"
      mode="aspectFill"
      @click="browseImages"
    />

    <!-- 富文本描述 -->
    <view class="synopsis" v-html="data?.goodsSynopsis"></view>

    <!-- 下拉刷新 -->
    <pull-down-refresh
      :opacity="refresh.moveBottom.value / 3"
      :enble-anim="refresh.isRefresh.value"
    />

    <!-- 点击按钮 -->
    <button-click :open-type="'orders'" msg="提交订单" />
  </view>
</template>

<script lang="ts" setup>
import { refreshHandler } from '@/components/common/pull_down_refresh'
import { ReqSelectGoodsDetail } from '@/api/goods'
import buttonClick from '@/components/common/button_click/button-click.vue'
import price from '@/components/common/price/price.vue'
import carousel from '@/components/layout/carousel/carousel.vue'
import type { PageGoods } from '@/config/data/data'
import { onLoad } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import format from '@/util/format'

//商品详情数据
const data = ref<PageGoods>({
  goodsId: 0,
  goodsTitle: '',
  goodsCover: '',
  goodsDiscount: 0,
  goodsPrice: 0,
  goodsDescription: 0,
  goodsInventory: 0,
  goodsSynopsis: '',
  goodsTeletext: '',
})

//下拉刷新
const refresh = refreshHandler(300)

//监听下拉刷新
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      getData()
    }
  }
)

//图片浏览
const browseImages = () => {
  if (data.value.goodsTeletext) {
    let list = []
    list.push(data.value.goodsCover)
    list.push(data.value.goodsTeletext)
    uni.previewImage({
      urls: list,
    })
  }
}

//商品id
const id = ref(0)

//获取数据
const getData = () => {
  ReqSelectGoodsDetail({ id: id.value })
    .then((res) => {
      if (res.code == 200 && res.data) {
        data.value = res.data
      }
    })
    .finally(() => {
      refresh.isRefresh.value ? refresh.refreshEnd(500) : ''
    })
}

//页面加载
onLoad((e: any) => {
  if (e.id) {
    id.value = e.id
    getData()
  }
})
</script>

<style scoped lang="scss">
.detail_box {
  width: calc(100% - 52rpx);
  padding: 0 26rpx;
  background-color: $uni-bg-color-grey;

  view {
    padding-bottom: 16rpx;
  }

  .title {
    font-weight: 600;
    padding-top: 16rpx;
  }

  .synopsis {
    width: 100%;
    margin: 40rpx 0;
  }
  .swiper {
    width: 100%;
    height: 600rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
